import { useState, useEffect } from "react";
// import DianJi from "./components/base-hooks";
// import Title from "./components/title";
// import { mockDataArray } from "./mock";
function App() {
  // const [isLogin, setIsLogin] = useState(false);
  const [count, setCount] = useState(0);
  function getData() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch("https://api.example.com/data")
        .then((res) => res.json())
        .then((data) => setData(data));
      return () => {
        // 对请求进行操作，取消之类的
      };
    }, []); // 空数组表述没有依赖项，只在组件挂载和卸载时执行useEffect函数

    if (!data) {
      return <div>loading......</div>;
    }
    return <div>{JSON.stringify(data)}</div>;
  }
  // const setMyIsLogin = () => {
  //   setIsLogin((i) => !i);
  //   console.log(isLogin);
  // };
  // function test() {
  //   console.log(mockDataArray);
  // }
  // 无依赖项的useEffect
  useEffect(() => {
    console.log("组件挂载。。。", count);
    return () => {
      console.log("组件卸载。。。", count);
    };
  });
  return (
    <>
      {/* <h1>根节点</h1>
      <button onClick={test}>数据</button>
      <DianJi name={setMyIsLogin} />
      <button onClick={setMyIsLogin}>切换</button>
      <Title name="标题" />
      {isLogin ? <Title name="登录" /> : <Title name="未登录" />} */}
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </>
  );
}

export default App;

